import React, { Component } from "react";
import Details from "./Details";
// import { Link, Redirect, Switch, Route } from
import { Link, Route } from "react-router-dom";
export default class Message extends Component {
  state = {
    messageArr: [
      { id: "01", title: "消息1" },
      { id: "02", title: "消息2" },
      { id: "03", title: "消息3" },
    ],
  };
  replaceShow = (id, title) => {
    // params  router用接收
    //this.props.history.replace(`/home/message/details/${id}/${title}`);
    // state  router不用接收
    this.props.history.replace(`/home/message/details`, { id, title });
    // this.props.history.goBack()
    // this.props.history.goForword()
    // // this.props.history.go()
  };
  pushShow = (id, title) => {
    // params  router用接收
    //this.props.history.replace(`/home/message/details/${id}/${title}`);
    // state router不用接收
    this.props.history.push(`/home/message/details`, { id, title });
  };
  render() {
    const { messageArr } = this.state;
    return (
      <div>
        <div>我是 Message</div>
        <ul>
          {messageArr.map((msg) => {
            return (
              <li key={msg.id}>
                {/*向路由组件传递路params参数 */}
                {/*<Link to={`/home/message/details/${msg.id}/${msg.title}`}>
                  {msg.title}
            </Link>*/}
                <button
                  onClick={() => {
                    this.replaceShow(msg.id, msg.title);
                  }}
                >
                  replace
                </button>
                <button
                  onClick={() => {
                    this.replaceShow(msg.id, msg.title);
                  }}
                >
                  push
                </button>
                {/*向路由组件传递路search参数 */}
                {/* <Link
                  to={`/home/message/details/?id=${msg.id}&title=${msg.title}`}
                >
                  {msg.title}
               </Link>*/}
                {/* 向路由组件传递路state参数 ，不会在浏览器显示*/}
                <Link
                  to={{
                    pathname: "/home/message/details",
                    state: {
                      id: msg.id,
                      title: msg.title,
                    },
                  }}
                >
                  {msg.title}
                </Link>
              </li>
            );
          })}
        </ul>
        {/*声明接收params参数 :参数 ,在props里面的match获取 */}
        {/*<Route path="/home/message/details/:id/:title" component={Details} />*/}
        {/*search无需声明接收search参数 :参数 ,在props里面的search获取 */}
        {/*<Route path="/home/message/details" component={Details} />*/}
        {/*无需声明接收声明接收state参数 :参数 */}
        <Route path="/home/message/details" component={Details} />
      </div>
    );
  }
}
